iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
2
Modern Web

Quasar CLI Framework 邪教:整合分散的前端技術和工具、常見的開發需求系列 第 5

第五天:專案的維護 - 建立專案 (feat. NPM 實務需求與常用指令)

  • 分享至 

  • xImage
  •  

※ 今天的內容
一、建立 Quasar 專案的方式
二、以 Quasar UMD/Standalone,在網頁使用Quasar
三、以Vue CLI Quasar Plugin,在網頁使用Quasar
四、以Quasar CLI的方式安裝
五、CLI (Command-Line Interface)
六、為什麼要學 NPM 專案套件管理
七、npm 套件管理最常用到的指令
八、總結:建立專案的主要重點
九、延伸閱讀:npm cli、npm script

一、建立 Quasar 專案的方式

進到Quasar的官方文件
找到 Getting Started - Pick a Quasar Flavour
列出了三種建立Quasar的方式:

1. Quasar UMD/Standalone
透過CDN的方式,使用<link href=""> <script src=""> 引入 Quasar 的 CSS 與 Javascript
適用在不使用Webpack與套件管理的開發方式,把Quasar 當作 CSS UI Framework

2. Vue 3 CLI Plugin
以官方的Vue CLI 的專案架構 來整合 Quasar 框架的相依套件
絕大部分的 Webpack 設定、component 和 directives 的引入,都需要自行處理
無法在css使用並客製 官方的 Sass 或 Stylus的變數
適用在Webpack與套件管理的開發方式,把Quasar 當作 CSS UI Framework

3. Quasar CLI
將Vue CLI 專案的main.js、Webpack包一層
Webpack大部分的設定,都已預先為開發者處理與優化
也制定了較完整的專案資料夾結構
可以在css使用並客製 官方的 Sass 或 Stylus的變數
把Quasar當作是一個完整的前端 JS Framework + CSS UI Framework

二、Quasar UMD/Standalone,在網頁使用 Quasar

  1. 打開官方文件的Quasar UMD - CDN install

  2. 準備好一個網站的資料夾,建立index.htm

https://ithelp.ithome.com.tw/upload/images/20200920/20120331V4Ks9l7PhL.png

  1. 上方選擇需要的ICON、特性

https://ithelp.ithome.com.tw/upload/images/20200920/20120331DotBRD2yYi.png

  1. 下方會根據你上方選擇的項目,產生需要的CSS與JS的引入連結

https://ithelp.ithome.com.tw/upload/images/20200920/20120331GJwLN72KK1.png

  1. 將剛才複製的程式碼,貼到網頁上後,拿掉框框處理面的JSON ...

https://ithelp.ithome.com.tw/upload/images/20200920/20120331opJd7iB1cZ.png

  1. 接著在 上方加入div id="q-app",並隨便加入一個q-btn

https://ithelp.ithome.com.tw/upload/images/20200920/20120331Ik0WbWtrmX.png
7. 打開網頁,看到網頁上有一個quasar的q-btn,代表成功引入Quasar CSS Framework

https://ithelp.ithome.com.tw/upload/images/20200920/20120331TGGjO5VUdn.png

三、Vue CLI Quasar Plugin,在 Vue CLI 專案當中使用 Quasar

  1. 前置準備:npm 與 node.js、Vue CLI的專案
    npm 是一個仰賴node.js的套件管理系統
    node.js是一個可以在Server端執行Javascript的執行環境
    Vue CLI:Vue官方的CLI工具

  2. 打開官方文件的 Vue CLI Quasar Plugin

  3. 在任一資料夾,輸入「vue create my-app 」 以Vue CLI 建立一個新的Vue專案

https://ithelp.ithome.com.tw/upload/images/20200920/20120331RkBwSAGcZV.png

依序選擇需要的Vue常用套件、CSS 預處理器、Linter的設定
https://ithelp.ithome.com.tw/upload/images/20200920/20120331r3Et3OtPAo.png

  1. 在Vue CLI 建立的專案底下,以終端機輸入「vue add quasar」,加入Quasar Plugin

https://ithelp.ithome.com.tw/upload/images/20200920/20120331gApKUyvl2m.png

根據自己的需求,依序選擇專案的相關設定

? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? n
要不要將官方的App.vue 和 Home.vue替換成Quasar官方的,無所謂

? Pick a Quasar components & directives import strategy: (can be changed later) Auto import (kebab-case)
是否要讓Webpack自動引入Quasar有使用的元件,建議要
也可以手動自行引入

? Pick your favorite CSS preprocessor: SCSS
選擇要在 Quasar 使用的CSS 預處理器

? Choose Quasar Icon Set: Material
選擇主要的ICON字型

? Default Quasar language pack - one from https://github.com/quasarframework/quasar/tree/dev/ui/lang zh-hant
選擇語系

? Use RTL support? n
如果網站包含從右邊往左閱讀的多語系,請填y

? Select features: IE11 support, Roboto font, Material, Fontawesome
瀏覽器的支援,額外的Icon字型

https://ithelp.ithome.com.tw/upload/images/20200920/20120331topOjFT0Z8.png

  1. 安裝完後,請打開Home.vue,加入一個q-btn

https://ithelp.ithome.com.tw/upload/images/20200920/20120331f5sKTkXcp7.png

  1. 於下方終端機執行npm run serve,啟動Webpack的測試Server
    以瀏覽器打開測試Server的網址,確認是否成功加入Quasar到Vue CLI 專案

https://ithelp.ithome.com.tw/upload/images/20200920/20120331Wc300Dk8B7.png
https://ithelp.ithome.com.tw/upload/images/20200920/20120331DyTPalwnYR.png

四、以 Quasar CLI 的方式安裝並使用 Quasar

  1. 前置準備:npm 與 node.js
  2. 使用終端機,透過npm套件,輸入「npm install -g @quasar/cli」在電腦上安裝Quasar CLI

https://ithelp.ithome.com.tw/upload/images/20200920/20120331CgT6LpQluR.png

  1. 輸入 quasar -v ,若有出現版本則代表安裝成功

https://ithelp.ithome.com.tw/upload/images/20200920/20120331ptXSGlk5dm.png

  1. 在任一資料夾底下,透過終端機輸入 quasar create my-app
    接著根據自己的需求,依序選擇專案的相關設定

? Project name (internal usage for dev) my-app

? Project product name (must start with letter if building mobile apps) Quasar App
顯示於網站和APP的Title名稱

? Project description A Quasar Framework app
網頁預設的descrition說明

? Author user

? Pick your favorite CSS preprocessor: (can be changed later) SCSS
使用的預處理器

? Pick a Quasar components & directives import strategy: (can be changed later) Auto import
是否自動引入有使用的元件和directives

? Check the features needed for your project: ESLint (recommended), Vuex, Axios, Vue-i18n, IE11 support
需要用到的相依套件

? Pick an ESLint preset: Standard
Linter的規則嚴謹度

? Continue to install project dependencies after the project has been created? (recommended) NPM
使用的套件管理系統

https://ithelp.ithome.com.tw/upload/images/20200920/20120331MwU1lKzSkC.png

  1. 完成後,接著在專案資料夾src/pages,打開Index.vue,加入一個q-btn

https://ithelp.ithome.com.tw/upload/images/20200920/20120331XZMMOwf4iN.png

  1. 以終端機輸入quasar dev,來開啟網頁的測試Server,確認Quasar是否安裝成功

https://ithelp.ithome.com.tw/upload/images/20200920/20120331bmKnzXwT3p.png

https://ithelp.ithome.com.tw/upload/images/20200920/201203310s1Us93ioh.png

五、CLI (Command-Line Interface)

npm、vue、quasar都有自己的CLI工具
透過指令完成一件事情

CLI工具名稱 [指令] [參數]

例如:

使用Vue CLI 產生一個專案
vue create my-app

使用Quasar CLI 開啟測試Server
quasar dev

使用npm cli 安裝quasar cli
npm install -g @quasar/cli

如果要了解CLI工具提供了哪些指令,可以使用-h參數(或者 --help)來查詢,例如:

npm -h
vue -h
quasar -h

如果要了解CLI的某個指令說明,以及接受哪些參數,可以在指令後面加上-h來查詢,例如:

npm install -h
vue create -h
quasar create -h

六、為什麼要學 NPM 專案套件管理

(一)套件的管理

在專案的開發上,我們多半需要使用第三方的套件
在傳統沒有套件管理的時候,會用類似「以 二、Quasar UMD/Standalone,在網頁使用Quasar」
使用套件開發者放在CDN服務的網址,或者直接下載原始碼
藉由<script src> 跟 <link href> 引用到專案當中

有了套件管理工具之後
可以透過套件管理提供的CLI工具,從統一的管道下載需要的第三方套件至專案當中 並記錄專案當中,用到了哪些第三方套件

例如你打開專案資料夾底下的Package.json,你會看到quasar有用到axios 這個 呼叫 ajax 的 第三方套件
https://ithelp.ithome.com.tw/upload/images/20200920/20120331lJDkBHKi0w.png

當你從別人的git下載專案時,你會發現,專案裡面並不會包含第三方套件的檔案
只會有一個Package.json
你需要使用npm install ,讓npm 從這個專案的 package.json 安裝專案所有使用的第三方套件

(二) 簡化常用的指令

另一方面,可以透過npm的script,把常用的指令包裝起來,變成一個簡化過後的指令
例如:npm run XXX
在package.json的scripts,定義 XXX代表什麼

七、npm 套件管理最常用到的指令

(一) 套件管理相關

有的套件,會要求npm的最低版本,可以用npm -v 查看目前的版本是多少
npm -v

安裝package.json紀錄的所有套件
npm install 

在整台電腦上,安裝或移除特定的第三方套件,並記錄至Package.json (通常用在,所有專案都會用到的CLI工具)
npm install -g 套件名稱  #npm install --global
npm uninstall -g 套件名稱 

在某個專案資料夾底下,安裝特定的第三方套件,並記錄至Package.json (通常用在,某個專案的函式庫或框架)
npm install -s 套件名稱 #npm install --save
npm uninstall s 套件名稱

在某個專案資料夾底下,安裝特定的第三方套件,用於開發環境
npm install -D 套件名稱 #npm install --save-dev
npm uninstall -D 套件名稱

例如:以Quasar為例,他的要求是 Node >=10 and NPM >=5
這時候你可以用npm -v 確認電腦安裝的npm版本是不是在5以上

例如:不管你在任何地方,都可能用到Quasar CLI的工具
這時候我們會用「npm install -g @quasar/cli」

例如:是我們只會在某個專案用到CKEditor
這時候我們會使用「npm install -s ckeditor」

例如:我在開發環境需要ES Lint,但是上架到Heroku的時候不需要ES Lint
這時候我們會使用「npm install eslint --save-dev」

(二) 自訂CLI指令

以原生Vue CLI產生的專案來說
你可以透過下列指令去「開啟Webpack Dev Server」以及 「編譯並打包專案的程式碼」

開啟Webpack Dev Server
npm run serve

編譯並打包專案的程式碼
npm run build

在Vue CLI 產生的專案資料夾底下,打開package.json
會看到定義了serve 和 build 要執行的實際指令:
https://ithelp.ithome.com.tw/upload/images/20200920/201203315Wn2VPvmOl.png

例如:包裝指令「./node_modules/.bin/vue-cli-service serve」
npm run serve 等同於執行 ./node_modules/.bin/vue-cli-service serve
你不需要每一次都打這麼長的指令來開啟Dev Server
可以藉由npm cli 的腳本,簡化常用的指令

https://ithelp.ithome.com.tw/upload/images/20200920/20120331rLuOCcj1m0.png

也等同於使用npm自帶的npx

npx vue-cli-service serve

例如:包裝指令「quasar dev」
你也可以在Quasar 專案底下的 package.json
將quasar dev 包裝成 npm run serve

"scripts": {
  "serve": "quasar dev"
}

八、總結:建立專案的主要重點

  1. 依專案性質,選擇適合的方式安裝或引入框架
  2. CDN引入源碼的建立方式:在<head>裡面引入css,在<body>的最後面(</body>結束前)引入需要的js
  3. 框架CLI工具的建立方式:npm 套件管理 與 框架CLI 的 使用
  4. 啟動Dev server 確定框架被正確的安裝。

九、延伸閱讀:NPM

從零開始: 使用NPM套件
[指令] npm cli
npm scripts 使用指南
蛋頭教室 如何使用 npm script 變成你的建立工具 重點筆記


上一篇
第四天:關於學習和工作的技術選擇角度 - 理解早期的JQuery,現代JS框架
下一篇
第六天:專案維護 - 熟悉Quasar框架目錄架構 (feat. SPA、SSR、SEO)
系列文
Quasar CLI Framework 邪教:整合分散的前端技術和工具、常見的開發需求31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言